<template>
  <div id="originPrice">
    <br />
    <div>
      <div
        id="originPriceChart"
        :style="{ width: '100%', height: '900px' }"
      ></div>
    </div>
  </div>
</template>


<script>

export default {
  name: "productsDataDisplay",
  data() {
    return {
      chart: "",
      price: [],
      origin: [],
      date: [],
      priceChanges: [],
      option: {
        legend: {},
        tooltip: {},
        grid: { left: "2%", right: "2%", containLabel: true },
        xAxis: [
          {
            gridIndex: 0,
          },
        ],
        yAxis: [{ type: "category", gridIndex: 0, data: [] }],
        series: [
          {
            name: "",
            type: "bar",
            data: [],
            lineStyle: {
              normal: {
                color: "blue",
                width: 3,
              },
            },
            label: {
              show: true,
              option: "inside",
            },
          },
        ],
      },
    };
  },
  props: ["cate"],

  methods: {
    getMax(params) {
      var max = params[0];
      for (var i = 0; i < params.length; i++) {
        if (params[i] > max) {
          max = params[i];
        }
      }
      return max;
    },
    getMin(params) {
      var min = params[0];
      for (var i = 0; i < params.length; i++) {
        if (params[i] < min) {
          min = params[i];
        }
      }
      return min;
    },
    getInfo(cateName) {
      this.axios
        .get(
          //后端接口
          "http://122.51.157.58:8081/api-service/getAllOrigin?key=123456&cateName=" +
            cateName
        )
        .then((body) => {
          var result = body.data;

          for (var i = 0; i < result.data.result.length; i++) {
            this.price.push(result.data.result[i].originAvgPrice);
            this.date.push(result.data.result[i].marketDate);
            this.priceChanges.push(result.data.result[i].originPriceChange);
            this.origin.push(result.data.result[i].origin);
          }
          this.option.yAxis[0].data = this.origin;
          this.option.series[0].data = this.price;
          this.option.series[0].name = cateName + "各省均价";
          this.chart.setOption(this.option);
        });
    },
  },

  mounted() {
    this.chart = this.echarts.init(document.getElementById("originPriceChart"));
    this.getInfo(this.cate);
  },
};
</script>



<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
@import "@/../../static/css/dashboard.css";
h1,
h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
.chart {
  margin: auto;
  position: relative;
}
.bd-placeholder-img {
  font-size: 1.125rem;
  text-anchor: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

@media (min-width: 768px) {
  .bd-placeholder-img-lg {
    font-size: 3.5rem;
  }
}
</style>